<template>
  <div class="container">
    <a-row
      class="grid-demo"
      :gutter="24"
      align="center"
      justify="center"
      v-for="item in dishes"
      :key="item.dishId"
    >
      <a-col :span="4">
        <div
          ><img
            :src="item.dishPicture"
            alt=""
            :style="{ width: '100px', height: '100px' }"
        /></div>
      </a-col>
      <a-col :span="8">
        <div>菜名:{{ item.dishName }}</div>
      </a-col>
      <a-col :span="8">
        <a-popover position="right">
          <a-button type="primary">详情</a-button>
          <template #content>
            <p style="color: hotpink">{{item.dishDescribe}}</p>
          </template>
        </a-popover>
      </a-col>
      <a-col :span="3">
        <div><a-button size="mini" type="primary" @click="aaa">删除</a-button></div>
      </a-col>
    </a-row>
  </div>
</template>
<script>

import { getUserList } from '../../api/requestList.js'
export default {
  data() {
    return {
      dishes: [],
    };
  },
  methods:{
    // aaa() {
    //   console.log(1);
    //   getUserList().then((res)=>{
    //     console.log(res);
    //   })
    //   axios.get('http://localhost:8080/dish/types/6').then((res)=>{
    //     console.log(res);
    //   })
    // }
  },
  mounted() {
    getUserList().then((res)=>{
        // console.log(res);
        let getlist=res.data.data;
        console.log(getlist);
        this.dishes=getlist;
      })
  },
};
</script>
<style scoped>
</style>
